import React, { Component } from 'react'
 
import './index.css'
import {
  nodes, labelNodes, linesData, dashedLinesData,
} from './config.js';
import flowData from './data.json'
import * as echarts from 'echarts';
const remToPx = (res) => {
  const docEl = document.documentElement;
  const clientWidth = window.innerWidth
      || document.documentElement.clientWidth
      || document.body.clientWidth;
  if (!clientWidth) return;
  const fontSize = 100 * (clientWidth / 1920);
  return res * fontSize;
}
class flowChart extends Component {
  constructor() {
      super();
      this.state = {
      }
  }

  componentDidMount() {
    console.log(flowData)
    this.initChart()
  }

  componentWillUnmount() {

  }

  getgGraphOptions = options => {
    const charts = {
      nodes: [],
      labelNodes: [],
      linesData: [],
      dashedLinesData,
    };
    for (let j = 0; j < nodes.length; j++) {
      const {
        x, y, nodeName, type, svgPath, symbolSize, startColor, endColor,
      } = nodes[j];
      const match = options.find(item => item.name === nodeName && item.type === type);
      // 是否告警
      const sColor = match && match.alert ? 'red' : startColor;
      const eColor = match && match.alert ? '#fff' : endColor;
      var node = {
        nodeName,
        value: [x, y],
        symbolSize: symbolSize || remToPx(1.34),
        symbol: 'path://M737 122.289H287L62 512l225 389.711h450L962 512z',
        symbolKeepAspect: true,
        label: {
          position: 'inside',
          color: '#fff',
          fontWeight: 500,
          fontSize: remToPx(0.2),
          type,
        },
        itemStyle: {
          color: {
            type: 'radial', // 径向渐变
            x: 0.5, // 圆心坐标（中心）
            y: 0.5,
            r: 1, // 半径长度
            colorStops: [
              {
                offset: 0, color: sColor || '#3887de', // 0% 处的颜色
              }, {
                offset: 1, color: eColor || '#cae3fe', // 100% 处的颜色
              },
            ],
          },
          shadowBlur: remToPx(0.03),
          shadowColor: sColor,
        },
      };
      charts.nodes.push(node);
    }
    for (let i = 0; i < labelNodes.length; i++) {
      let {
        x, y, name, bgColor, type, customData,
      } = labelNodes[i];
      customData.count_unit = '';
      customData.rate_unit = '';
      const matchNode = options.find(item => item.name === name && item.type === type);
      customData = matchNode ? JSON.parse(JSON.stringify(matchNode.data)) : customData;
      var node = {
        nodeName: name,
        value: [x, y],
        symbolSize: [remToPx(1.6), remToPx(0.7)],
        symbol: 'rect',
        itemStyle: {
          color: bgColor,
          type,
          ...customData,
        },
      };
      charts.labelNodes.push(node);
    }
  
    for (let j = 0; j < linesData.length; j++) {
      const {
        type, coords,
      } = linesData[j];
      const match = options.find(item => item.type === type);
      // 是否告警
      const lineColor = match && match.line_alert ? '#FD7979' : linesData[j].lineColor;
      const label = {
        coords,
        lineStyle: {
          type: linesData[j].lineType || 'solid',
          width: 3,
          color: lineColor || 'blue',
          curveness: 0.8,
          join: 'round',
        },
      };
      charts.linesData.push(label);
    }
  
    return {
      backgroundColor: '#fff',
      grid: {
        left: '5%',
        right: '5%',
        bottom: '5%',
        top: '12%',
        containLabel: true,
      },
      xAxis: {
        min: 0,
        max: 1800,
        show: false,
        type: 'value',
      },
      yAxis: {
        min: 0,
        max: 600,
        show: false,
        type: 'value',
      },
      series: [
        {
          type: 'lines',
          polyline: true,
          coordinateSystem: 'cartesian2d',
          data: charts.linesData,
        },
        {
          type: 'lines',
          polyline: true,
          coordinateSystem: 'cartesian2d',
          animation: false,
          effect: {
            show: true,
            trailLength: 0.1,
            symbol: 'circle',
            symbolSize: 6,
            constantSpeed: 100,
          },
          zlevel: 0,
          data: charts.linesData,
        },
        {
          type: 'graph',
          coordinateSystem: 'cartesian2d',
          label: {
            show: true,
            position: 'bottom',
            color: 'yellow',
            formatter(item) {
              return item.data.nodeName;
            },
          },
          data: charts.nodes,
  
        },
        {
          type: 'graph',
          coordinateSystem: 'cartesian2d',
          zlevel: 2,
          label: {
            show: true,
            position: 'inside',
            color: '#333',
            lineHeight: 20,
            formatter(item) {
              const {
                count, rate, type, count_unit, rate_unit,
              } = item.data.itemStyle;
              if (type === 'send') {
                return `发送量：${count}${count_unit}条\n发送速率：${rate}${rate_unit}条/秒`;
              }
              if (type === 'access') {
                return `接入量：${count}${count_unit}条\n接入速率：${rate}${rate_unit}条/秒`;
              }
              if (type === 'forward') {
                return `转发量：${count}${count_unit}条\n转发速率：${rate}${rate_unit}条/秒`;
              }
              if (type === 'process') {
                return `加工量：${count}${count_unit}条\n加工速率：${rate}${rate_unit}条/秒`;
              }
            },
          },
          data: charts.labelNodes,
        },
        {
          type: 'lines',
          polyline: true,
          coordinateSystem: 'cartesian2d',
          data: charts.dashedLinesData.map(item => ({
            ...item,
            lineStyle: {
              type: item.lineType || 'solid',
              width: 3,
              color: item.lineColor || 'blue',
              curveness: 0.8,
              join: 'round',
            },
          })),
        },
      ],
    };
  };

  getOptions() {
    const options = this.getgGraphOptions(flowData);
    console.log(options,'options')
    return options;
  }

  initChart(){
    const dom = document.getElementById('echarts')
    const myChart = echarts.init(dom)
    myChart.setOption(this.getOptions());
  }

  render() {
    return (
      <div className="flow-chard">
          <div id="echarts" ref="echarts" style={{
            width: '100%',
            height: '100%'
          }}></div>
      </div>
    )
  }

}

export default flowChart